<template>
  <el-container>
    <el-header>
      <!-- fetch-suggestions 当输入改变的时候，该方法会得到触发
          :select-when-unmatched="true" 当为true的时候，@select方法才有效
      -->
      <el-autocomplete v-model="queryText"
                       :select-when-unmatched="true"
                       @select="executeSearch"
                       :fetch-suggestions="querySearch" placeholder="请输入内容"
                       ></el-autocomplete>
      <el-button @click="executeSearch" type="danger">搜索一下</el-button>
    </el-header>
    <el-divider></el-divider> <!-- 分割线 -->
    <el-main>
      <el-card v-for="n in newsList" class="box-card" :key="n.id">
        <h3><a :href="n.url" v-html="n.title"></a></h3>
        <p v-html="n.content">
        </p>
      </el-card>

    </el-main>
  </el-container>
</template>

<script>

export default {
  data() {
    return {
      newsList: [],
      queryText: ''
    };
  },
  methods: {
    querySearch(queryString, cb) {
      /**
      var restaurants = this.restaurants;
      var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
      // 调用 callback 返回建议列表的数据
      cb(results);   let data = [{"value":"fe"}] cb(data);
       */
      this.axios.get("http://localhost:8080/search?searchText=" + queryString)
              .then(resp => {
                 let suggestionData = resp.data;
                 cb(suggestionData);
              });
    },
    executeSearch() {
      this.axios.get("http://localhost:8080/search/execute?searchText=" + this.queryText)
              .then(resp => {
                this.newsList = resp.data;
              });
    }
  }
}
</script>

<style>

</style>
